<template>
	<view class="upper-navigation">
		<view class="status-bar-fixed" style="height: var(--status-bar-height);">
			<!-- 所有自定义导航都要加这个，用来处理小程序显示时的手机信号那一栏的高度 -->
		</view>
		<view class="nav-area">
			<navigator url="" class="btn-back" open-type="navigateBack">
				<image src="../../static/chevron-left.svg"></image>
			</navigator>
			<view class="title-area">
				<slot/>
			</view>
			<view class="action-area"></view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	@title-size: 35rpx;
	@title-height: @title-size * 3;
	.upper-navigation {
		.nav-area {
			display: flex;
	
			.btn-back {
				display: block;
				flex: 0 0 @title-height; 
				height: @title-height;
				position: relative;
				image {
					width: @title-height * .75;
					height: @title-height * .75;					
					
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.action-area {
				display: block;
				flex: 0 0 @title-height; 
			}
	
			.title-area {
				flex: 1;
				font-size: @title-size;
				line-height: @title-height;
				text-align: center;
				border-bottom: 1rpx solid #d4c4c4;
			}
		}
	}
</style>